<template>
  <scrollbar :itemList="itemList" :colorStyle="colorStyle" @click="scrollbarItemClick" v-if="shopcatList.length > 1"></scrollbar>
</template>

<script>
let api = require('../include/api')
module.exports = {
  components: {
    'scrollbar': require('./scrollbar.vue')
  },
  props: {
    colorStyle: {default: 'default'},
    shopcatIds: {default: ''},
    allText: {default: '优选'}
  },
  data () {
    return {
      itemList: [],
      shopcatList: [
        {
          title: this.allText,
          id: this.shopcatIds || '',
          all: true
        }
      ]
    }
  },
  created () {
    api.shopcat.list({parentIds: this.shopcatIds || 0, children: false}).done((rs) => {
      this.shopcatList = this.shopcatList.concat(rs.data)
      this.shopcatList.forEach((s) => {
        this.itemList.push({
          title: s.title
        })
      })
    })
  },
  methods: {
    scrollbarItemClick (idx) {
      let shopcat = this.shopcatList[idx]
      this.$emit('shopcatSelected', shopcat)
    }
  }
}
</script>

<style lang="scss">

</style>
